<template>
  <div class="activity-detail-container">
    <h1>{{ activity.title }}</h1>
    
    <div v-if="activity.id" class="activity-content">
      <p>{{ activity.description }}</p>
      <p><strong>日期:</strong> {{ activity.date }}</p>
      <p><strong>地点:</strong> {{ activity.location }}</p>
    </div>
    
    <div v-else class="not-found">
      <p>未找到指定的活动。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activity: {}
    }
  },
  mounted() {
    // 获取URL中的活动ID参数
    const activityId = parseInt(this.$route.params.id)
    
    // 通过store中的数据根据id查询
    const activities = this.$store.state.globalActivities
    this.activity = activities.find(a => a.id === activityId) || {}
  }
}
</script>

<style scoped>
.activity-detail-container {
  padding: 20px;
}

.activity-content {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  line-height: 1.6;
}

.not-found {
  color: #e74c3c;
  font-weight: bold;
}

strong {
  color: #333;
}
</style>